<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { PlusColumn } from "plus-pro-components";
import { findTable, putTable } from "@/api/apiJson";
import JsonEditor from "@/components/Crud/operate/config/json-editor.vue";
import Search from "@/components/Crud/operate/config/search.vue";

defineOptions({
  name: "自动页面渲染"
});
const emit = defineEmits(["search"]);
const props = defineProps({
  params: {
    type: Object
  },
  from_config: {
    type: Object,
    required: true,
    default: () => {
      return {
        columns: []
      };
    }
  },
  businessCode: {
    type: String,
    required: true
  }
});
const visible = ref(true);

const pageConfig = ref<any>({});
const baseColumns: PlusColumn[] = [
  {
    label: "名称",
    prop: "name"
  },
  {
    label: "编码",
    prop: "code"
  },
  {
    label: "模型编码",
    prop: "business_code"
  },
  {
    label: "搜索配置",
    prop: "search_config"
  },
  {
    label: "表格配置",
    prop: "table_config"
  },

  {
    label: "新增配置",
    prop: "add_config"
  },
  {
    label: "修改配置",
    prop: "edit_config"
  },
  {
    label: "按钮配置",
    prop: "operate_config"
  },
  {
    label: "工具栏配置",
    prop: "toolbar_config"
  },
  {
    label: "请求配置",
    prop: "params_json"
  },
  {
    label: "备注",
    prop: "remark",
    valueType: "textarea",
    colProps: {
      span: 24
    }
  }
];

// ============================业务操作========================================
const activeName = ref("base");
const id = props.params.row[`${props.businessCode}`].id;

async function getData() {
  pageConfig.value = (await findTable(props.businessCode, { id }))[
    props.businessCode
  ];
}

onMounted(() => {
  getData();
});

async function handleConfirm() {
  await putTable(props.businessCode, pageConfig.value).then(() => {
    emit("search");
    visible.value = false;
  });
}
</script>

<template>
  <PlusDialog
    v-model="visible"
    :title="props.params.text"
    width="100%"
    top="0vh"
    @confirm="handleConfirm"
  >
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="base">
        <PlusForm
          v-model="pageConfig"
          labelWidth="90px"
          :columns="baseColumns"
          :row-props="{ gutter: 20 }"
          :col-props="{ span: 8 }"
          :hasFooter="false"
        >
          <template #plus-field-table_config>
            <JsonEditor
              :json="pageConfig.table_config"
              @update:json="(val: any) => (pageConfig.table_config = val)"
            />
          </template>
          <template #plus-field-search_config>
            <JsonEditor
              :json="pageConfig.search_config"
              @update:json="(val: any) => (pageConfig.search_config = val)"
            />
          </template>
          <template #plus-field-params_json>
            <JsonEditor
              :json="pageConfig.params_json"
              @update:json="(val: any) => (pageConfig.params_json = val)"
            />
          </template>
          <template #plus-field-operate_config>
            <JsonEditor
              :json="pageConfig.operate_config"
              @update:json="(val: any) => (pageConfig.operate_config = val)"
            />
          </template>
          <template #plus-field-add_config>
            <JsonEditor
              :json="pageConfig.add_config"
              @update:json="(val: any) => (pageConfig.add_config = val)"
            />
          </template>
          <template #plus-field-edit_config>
            <JsonEditor
              :json="pageConfig.edit_config"
              @update:json="(val: any) => (pageConfig.edit_config = val)"
            />
          </template>
          <template #plus-field-toolbar_config>
            <JsonEditor
              :json="pageConfig.toolbar_config"
              @update:json="(val: any) => (pageConfig.toolbar_config = val)"
            />
          </template>
        </PlusForm>
      </el-tab-pane>
      <el-tab-pane label="搜索框" name="search" :lazy="false">
        <Search :search_config="pageConfig.search_config" />
      </el-tab-pane>
      <el-tab-pane label="表格" name="table">表格</el-tab-pane>
      <el-tab-pane label="新增表单" name="add">新增表单</el-tab-pane>
      <el-tab-pane label="修改表单" name="edit">修改表单</el-tab-pane>
      <el-tab-pane label="预览" name="view">预览样式</el-tab-pane>
    </el-tabs>
  </PlusDialog>
</template>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
